<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 14px
        }

        #box {
            width: 500px;
            margin: 100px auto
        }

        table,
        th,
        td {
            border: 1px solid #000;
            border-collapse: collapse
        }

        td,
        th {
            width: 100px;
            height: 30px;
            padding: 10px
        }

        input[type="text"] {
            display: none;
            height: 24px;
            width: 60px;
            border: 1px solid #ccc;
        }

        .menu {
            width: 150px !important;
            display: inline-block !important;
            float: left;
            margin-right: 20px;
        }

        .add {
            float: left;
        }

        tbody tr td:first-child {
            text-align: center;
        }

        tbody tr {
            width: 499px;
            height: 40px;
        }


        tfoot td {
            text-align: right;
        }

        .editBtn {
            color: #666
        }

        .delBtn {
            color: red
        }

        .okBtn,
        .cancelBtn {
            display: none
        }

        .edit span {
            display: none
        }

        .edit input[type="text"] {
            display: inline-block
        }

        .edit .editBtn,
        .edit .delBtn {
            display: none
        }

        .edit .okBtn,
        .edit .cancelBtn {
            display: inline
        }
    </style>

</head>

<body>
    <div id="box">
        <table>
            <thead>
                <tr>
                    <th><label>全选：<input type="checkbox" id="allCheck" /></label></th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>编辑</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" class="check" /></td>
                    <td><span>张三</span><input type="text"></td>
                    <td><span>18</span><input type="text"></td>
                    <td><span>1</span><input type="text"></td>
                    <td>
                        <a href="javascript:;" class="editBtn">编辑</a>
                        <a href="javascript:;" class="okBtn">确定</a>
                        <a href="javascript:;" class="cancelBtn">取消</a>
                        <a href="javascript:;" class="delBtn">删除</a>
                    </td>

                </tr>
                <tr>
                    <td><input type="checkbox" class="check" /></td>
                    <td><span>李四</span><input type="text"></td>
                    <td><span>25</span><input type="text"></td>
                    <td><span>2</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a
                            href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a>
                    </td>

                </tr>
                <tr>
                    <td><input type="checkbox" class="check" /></td>
                    <td><span>小强</span><input type="text"></td>
                    <td><span>22</span><input type="text"></td>
                    <td><span>3</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a
                            href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a>
                    </td>

                </tr>
                <tr>
                    <td><input type="checkbox" class="check" /></td>
                    <td><span>小明</span><input type="text"></td>
                    <td><span>16</span><input type="text"></td>
                    <td><span>4</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a
                            href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a>
                    </td>

                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5"><input type="text" class="menu"> <button class="add">加菜</button> 总价：￥<b
                            id="money"></b></td>
                </tr>
            </tfoot>
        </table>
    </div>

    <script>

        var editBtn = document.querySelectorAll('.editBtn');
        var okBtn = document.querySelectorAll('.okBtn');
        var cancelBtn = document.querySelectorAll('.cancelBtn');
        var delBtn = document.querySelectorAll('.delBtn');
        var allCheck = document.querySelector('#allCheck')
        var check = document.querySelectorAll('.check')
        var n = 0;
        var money = document.querySelector('#money')
        var sum = 0;
        var menu = document.querySelector('.menu');
        var add = document.querySelector('.add')

        //求总价
        function sun() {
            sum = 0;
            Array.from(check).forEach(function (item) {
                var tr = item.parentNode.parentNode;
                if (item.checked == true) {
                    sum += tr.children[2].children[0].innerHTML *
                        tr.children[3].children[0].innerHTML
                    // console.log(sum)
                }
                money.innerHTML = sum;
            })
        }


        //加菜
        add.onclick = function () {
            var name = menu.value;
            var tbody = document.querySelector('tbody')
            var clone = tbody.children[0].cloneNode(true)
            clone.children[1].children[0].innerHTML = name;
            // console.log(clone)
            tbody.appendChild(clone);
            check = document.querySelectorAll('.check')
            check.length++;
            console.log(check.length)
            sun();

        }




        document.querySelector('thead').onclick = function (e) {
            e = e || event;
            var target = e.target || e.srcElement;
            console.log(target)
            // 全选
            if (target.id === 'allCheck') {
                Array.from(check).forEach(function (item) {
                    item.checked = allCheck.checked;
                })
                sun()
                n = this.checked ? check.length : 0
            }
        }


        document.querySelector('tbody').onclick = function (e) {
            e = e || event;
            var target = e.target || e.srcElement;
            var tr = target.parentNode.parentNode;
            console.log(tr)
            switch (target.className) {
                case 'check':
                    //单选
                    Array.from(check).forEach(function (item) {
                        item.onchange = function () {
                            this.checked ? n++ : n--
                            allCheck.checked = n === check.length ? true : false
                            console.log(n)
                            sun()
                        }
                    })
                    break;

                case 'editBtn':
                    //编辑
                    tr.classList.add('edit');
                    var span = tr.querySelectorAll('span');
                    //获取一行中所有的span
                    Array.from(span).forEach(function (item, index) {
                        item.nextElementSibling.value = item.innerHTML;
                    })
                    break;

                case 'cancelBtn':
                    //取消
                    tr.classList.remove('edit');
                    break;


                case 'okBtn':
                    //确定
                    tr.classList.remove('edit')
                    var span = tr.querySelectorAll('span');
                    //获取一行中所有的span
                    Array.from(span).forEach(function (item, index) {
                        item.innerHTML = item.nextElementSibling.value;
                    })
                    sun();
                    break;

                case 'delBtn':
                    //删除
                    if (confirm('确定要删除吗？')) {
                        tr.remove();
                    }
                    check = document.querySelectorAll('.check')
                    console.log(check)
                    //判断删除的是否是checked=true的tr
                    console.log(tr.children[0].children[0].checked)
                    if (tr.children[0].children[0].checked) {
                        n--;
                        sun()
                    }




            }
        }






        /*
        //编辑
        Array.from(editBtn).forEach(function (ed) {
            ed.onclick = function () {
                var tr = this.parentNode.parentNode;
                tr.classList.add('edit');
                var span = tr.querySelectorAll('span');
                //获取一行中所有的span
                Array.from(span).forEach(function (item, index) {
                    item.nextElementSibling.value = item.innerHTML;
                })
            }
        })

        //取消
        Array.from(cancelBtn).forEach(function (can) {
            can.onclick = function () {
                var tr = this.parentNode.parentNode;
                tr.classList.remove('edit');
            }
        })

        //删除
        Array.from(delBtn).forEach(function (del) {
            del.onclick = function () {

                var tr = this.parentNode.parentNode;

                tr.remove();
                check = document.querySelectorAll('.check')
                console.log(check)
                //判断删除的是否是checked=true的tr
                console.log(tr.children[0].children[0].checked)
                if(tr.children[0].children[0].checked){
                    n--;
                        sun()
                }

            }
        })



        //确定
        Array.from(okBtn).forEach(function (ok) {
            ok.onclick = function () {
                var tr = this.parentNode.parentNode;
                tr.classList.remove('edit')
                var span = tr.querySelectorAll('span');
                //获取一行中所有的span
                Array.from(span).forEach(function (item, index) {
                    item.innerHTML = item.nextElementSibling.value;
                })
                var tr = ok.parentNode.parentNode;
                sun()
            }
        })


        //全选
        allCheck.onchange = function () {
            Array.from(check).forEach(function (item) {
                item.checked = allCheck.checked;

            })
            sun()
            n = this.checked ? check.length : 0
            // console.log(n)

        }

        //单选
        Array.from(check).forEach(function (item) {
            item.onchange = function () {
                this.checked ? n++ : n--
                allCheck.checked = n === check.length ? true : false
                console.log(n)
                sun()
            }
        })
*/


    </script>
</body>

</html>